<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>
    <meta charset="utf-8">
    <title>商品详情页</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/bootstrap.css">

    <style type="text/css">
        .box {
            width: 100%;
            text-align: center;
        }

        #main-body {
            display: inline-block;
            text-align: left;
            width: 60%;
        }

        .name-navigation {
            margin: 10px 0 10px 20px;
        }

        a {
            color: #CCCCCC;
            margin: 3px;
        }

        .left-right {
            display: flex;
            justify-content: space-between;
            width: 350px;
            align-items: center;
        }

        .margin-num {
            margin-left: 10px;
        }

        .top {
            display: flex;
            margin-bottom: 60px;
        }

        .alert-warning {
            height: 80px;
        }

        .top-right {
            margin-left: 40px;
            position: relative;
        }

        .left-img {
            margin: 10px;
        }

        .buy-btns {
            position: absolute;
            bottom: 10px;
            text-align: center;
            width: 100%;
        }

        .buy-btns .btn {
            margin-left: 10px;
        }

        .card-left {
            height: auto;
            border-radius: 5px;
            box-shadow: 0 3px 10px 2px #d1d1d1;
            padding: 25px;
            text-align: center;
        }

        .left-info {
            margin-top: 40px;
        }

        .info-right {
            display: flex;
            align-items: flex-start;
        }

        .right {
            width: 100%;
            margin-left: 20px;
        }

        .right>.right-top {
            border-radius: 5px;
            box-shadow: 0 3px 10px 2px #d1d1d1;
            padding: 15px;
            margin-bottom: 20px;
        }

        .right>.right-top>font:nth-child(2) {
            margin-left: 40px;
        }
    </style>
</head>

<body>
<!-- 头部 -->
<jsp:include page="/components/header.jsp"></jsp:include>
<div class="box">
    <div id="main-body">
        <div>
            <!-- 内容导航 -->
            <div class="name-navigation">
                <a href="./index.html">首页</a>>
            </div>
            <div class="top">
                <div class="top-left">
                    <img style="width: 420px;height:420px" src="${product.tpFileName}">

                </div>
                <div class="top-right">
                    <p><b>${product.tpDescription}</b></p>
                    <div class="alert alert-warning" role="alert" class="price-bg">
                        本店价
                        <b>
                            <font size="" color="#EF500C">￥
                                <font size="5px" color="">${product.tpPrice}</font>
                            </font>
                        </b>
                    </div>
                    <div class="left-right">
                        <div>
                            <font size="" color="#868686">配送至</font>
                            <button type="button" class="btn btn-outline-secondary margin-num">选择地址</button>
                        </div>
                        <div>
                            <font size="" color="#868686">库存</font>
                            <b>
                                <font size="" color="#555555" class="margin-num">1999件</font>
                            </b>
                        </div>
                    </div>

                    <hr>

                    <!-- <p>
                        <font size="" color="#868686">口味</font>
                        <button type="button" class="btn btn-outline-warning margin-num active">闪冲花神咖啡礼盒</button>
                    </p> -->
                    <!-- <p>
                        <font size="" color="#868686">净含量</font>
                        <button type="button" class="btn btn-outline-warning margin-num active" id="contentone">1x12x2g</button>
                        <button type="button" class="btn btn-outline-warning margin-num" id="contenttwo">1x24x2g</button>
                    </p> -->
                    <p>
                        <font size="" color="#868686">数量</font>
                        <span class="btn-group margin-num" role="group" aria-label="Basic example">
								<button type="button" class="btn btn-outline-secondary" onclick="minus()">-</button>
								<button type="button" class="btn btn-outline-secondary" id="count">1</button>
								<button type="button" class="btn btn-outline-secondary" onclick="add()">+</button>
							</span>
                    </p>

                    <div class="buy-btns">
                        <a  class="btn btn-lg btn-outline-warning" href="/order?tpId=${product.tpId}">立即购买</a>
                        <a  class="btn btn-lg btn-warning" href="/shopCart?m=add&tpId=${product.tpId}">加入购物车</a>
                        <button type="button" class="btn btn-lg btn-light"><img src="img/image(19).png"></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片详情 -->
        <div class="info-right">

            <div class="right">
                <div class="right-top">
                    <font size="" color="#EF500C">商品详情</font>
                    <font size="" color="#CCCCCC">累计评价</font>
                    <font size="" color="#000000">1295</font>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<iframe name="footer_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/footer.html" frameborder=0 scrolling="no"></iframe>

<script type="text/javascript">
    var count = document.getElementById("count")
    var counttxt = count.innerText;
    var btncontentOne = document.getElementById("contentone")
    var btncontentTwo = document.getElementById("contenttwo")

    btncontentTwo.onclick = function() {
        btncontentTwo.classList.add("active")
        btncontentOne.classList.remove("active")
    }
    btncontentOne.onclick = function() {
        btncontentOne.classList.add("active")
        btncontentTwo.classList.remove("active")
    }

    function minus() {
        if (counttxt > 0) {
            counttxt--
            count.innerText = counttxt
        }
    }

    function add() {
        counttxt++
        count.innerText = counttxt
    }
</script>
</body>

</html>